<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志系统</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
    <input type="text" placeholder="输入你要说的话"/>
    <button id="sendButton">发送一条消息</button>
</div>
<script>
    window._uuid = ""


    function safeParseJson(str) {
        try {
            return JSON.parse(str)
        } catch (e) {
            return null
            console.error('转换json失败', str)

        }
    }

    function displayContent(str) {
        console.log(str)
    }

    function sendMessage(str, code=200) {
        socket.send(JSON.stringify({
            uuid: window._uuid,
            message: str,
            code
        }));

    }

    var socket = new WebSocket("ws://localhost:11111");
    socket.onopen = function (msg) {
    };
    socket.onmessage = function (msg) {
        var resive = safeParseJson(msg.data)
        //第一次连接 知道我的客户端uuid
        if (resive.code == 0) {
            window._uuid = resive.uuid;
            console.log("连接成功", window._uuid)
        }
    };
    socket.onclose = function (msg) {
        console.log("socket closed!")
    };


    $(document).ready(() => {
        $('#sendButton').click(() => {
            sendMessage($('input').val())
        })
    })
</script>
</body>
</html>